<template>
  <view
    class="subscription-mask"
    :class="currentConfig.customClass"
    v-if="show"
  >
    <view class="mask-content">
      <view class="lock-icon">
        <image src="/static/lock-icon.png" mode="aspectFit"></image>
      </view>
      <view class="subscription-text">{{ currentConfig.text }}</view>
      <view class="subscription-btn" @click="handleClick(currentConfig)">
        {{ currentConfig.btnText }}
      </view>
    </view>
    <!-- 使用封装的订阅弹窗组件 -->
    <subscription-dialog
      :show="showCustomDialog"
      :showCustom="showCustom"
      @confirm="goToSubscription"
      @close="showCustomDialog = false"
      @upgrade="upgradeUpdate"
      @subscribe="subscribeUpdate"
    />
  </view>
</template>

<script>
import SubscriptionDialog from "./components/subscription-dialog.vue"
export default {
  name: "SubscriptionMask",
  components: {
    SubscriptionDialog,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showCustom: {
        title: "订阅需要话费9,999Y币/月",
        description: "要订阅此智能体吗？",
        confirmText: "确认订阅",
      },
      actionType: "subscribe",
      configData: {
        subscribe: {
          text: "该智能体为付费专享，3分钟体验结束啦~",
          btnText: "去订阅",
          action: "goToSubscription", // 指定要调用的方法名
          params: [], // 如果方法需要参数，可以在这里传递
          customClass: "subscribe",
        },
        vip: {
          text: "抱歉你的余额不足，暂时不能聊天了喔～",
          btnText: "开通畅聊",
          action: "upgradeMembership",
          params: ["vip"],
          customClass: "vip",
        },
      },
      showCustomDialog: false,
      // 其他数据
    }
  },
  computed: {
    // 获取当前配置对象
    currentConfig() {
      return this.configData[this.actionType] || {}
    },
  },
  mounted() {
    // console.log(this.configData[this.actionType])
  },
  methods: {
    // 处理点击事件的统一方法
    handleClick(config) {
      if (
        config &&
        config.action &&
        typeof this[config.action] === "function"
      ) {
        // 调用指定的方法，并传递参数
        this[config.action](...(config.params || []))
      } else {
        console.error(`Method ${config.action} not found or not a function`)
      }
    },
    showDialog() {
      this.showCustomDialog = true
    },
    closeDialog() {
      this.showCustomDialog = false
    },
    // 开始畅聊方法
    upgradeMembership(level) {
      this.showCustom = {
        title: "全站基础角色畅聊300Y币/月",
        description: "要订阅此智能体吗？",
        confirmText: "确认订阅",
        action: "upgradeMembership",
      }
      this.showDialog()
      // 实现升级逻辑
      this.$emit("subscribe", true)
    },

    // 确认订阅
    goToSubscription() {
      this.showCustom = {
        title: "订阅需要话费9,999Y币/月",
        description: "要订阅此智能体吗？",
        confirmText: "确认订购",
        action: "goToSubscription",
      }

      this.showDialog()
      // 这里写订阅逻辑
      this.$emit("subscribe", true)
    },
    upgradeUpdate(val) {
      this.actionType = val
      this.$emit("subscribe", false)
      this.closeDialog()
    },
    subscribeUpdate(val) {
      // this.actionType = val
      // this.closeDialog()
      this.$emit("subscribe", false)
      this.closeDialog()
    },
    // 确认按钮回调
    onConfirmCustom() {
      this.showCustomDialog = false
      // 这里写你的确认逻辑
    },
  },
}
</script>

<style lang="scss" scoped>
.subscription-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  font-size: 31rpx;
  color: #ffffff;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  &.subscribe {
    background: linear-gradient(
      180deg,
      rgba(124, 121, 255, 0.7) 0%,
      rgba(20, 17, 195, 0.7) 100%
    );
  }
  &.vip {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(8, 8, 8, 0.7) 100%
    );
  }
}

.mask-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lock-icon {
  width: 82rpx;
  height: 82rpx;
  margin-bottom: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.subscription-text {
  color: #ffffff;
  font-size: 31rpx;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40rpx;
}

.subscription-btn {
  width: 212rpx;
  height: 77rpx;
  border-radius: 38rpx;
  font-size: 31rpx;
  color: #6274e9;
  font-weight: 500;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
</style>
